<template>
  <!-- 根目录 -->
  <div>
    <Header></Header>
    <!-- 产品 -->
    <div class="product_introduce">
      <!-- 遍历产品数组 -->
      <div v-for="(product, index) in products" :key="index" class="product-container">
        <!-- 文字介绍 -->
        <p class="p1">{{ product.name }}</p>
        <p class="p2">{{ product.introduction1 }}</p>
        <p class="p3">{{ product.introduction2 }}</p>
        <p class="p4">{{ product.price }}</p>
        <!-- 图片 -->
        <div class="img">
          <img :src="require('@/assets/images/LaptopsTablets/' + product.image)" alt="Product Image" />
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <Footer></Footer>
  </div>
</template>

<script>
// 引入底部组件
import Footer from "@/components/Footer.vue";
import Header from "@/components/Header.vue";
// 引入数据
let laptopsTablets = require("@/assets/data/laptopsTablets.json");
export default {
  name: 'LaptopsTablets',
  components: {
    Footer, Header
  },
  data() {
    return {
      products: laptopsTablets
    }
  },
}
</script>


<style scoped>
.product-title-text {
  font-size: 26px;
  color: #333;
  font-weight: bold;
  position: relative;
  left: 20px;
}

.product_introduce {
  text-align: center;
  padding: 20px;
  margin-top: 70px;
}

.product-container {
  padding-bottom: 20px;
  border-bottom: 1px solid rgb(127, 125, 125);
}


.product_introduce .p1 {
  color: #333;
  line-height: 1.8;
  animation: textAnimation 5s infinite;
  font-weight: bold;
}

.product_introduce .p2 {
  font-size: 30px;
  margin-top: 20px;
  margin-bottom: 10px;
}

.product_introduce .p3 {
  font-size: 18px;
  margin-bottom: 10px;
}

.product_introduce .p4 {
  font-size: 16px;
}

.product_introduce .img {
  margin-top: 20px;
}

.product_introduce .img img {
  width: 1226px;
}

@keyframes textAnimation {
  0% {
    font-size: 38px;
  }

  50% {
    font-size: 28px;
  }

  100% {
    font-size: 38px;
  }
}
</style>
